// import 'package:euromillions/tools/EJ_ballsView.dart';
// import 'package:euromillions/tools/EJ_config.dart';
// import 'package:euromillions/tools/EJ_emsBalls.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

import '../tools/FL_emsBalls.dart';
import '../tools/KaL_Config.dart';
import '../tools/models/KaL_LottoModel.dart';

class EJResultDetailPage extends StatefulWidget {
  EJResultDetailPage({super.key, required this.dataModel});
  KaL_LottoModel dataModel;

  @override
  State<EJResultDetailPage> createState() => _EJResultDetailPageState();
}

class _EJResultDetailPageState extends State<EJResultDetailPage> {
  ///
  late KaL_LottoModel _Model;

  @override
  Widget build(BuildContext context) {
    _Model = widget.dataModel;
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Draw Details',
          style: TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 18,
          ),
        ),
        backgroundColor: Colors.white,
        foregroundColor: KaL_Config.KaL_MainColor,
        centerTitle: true,
      ),
      body: Container(
        width: double.infinity,
        color: KaL_Config.KaL_pageBgColor,
        child: Column(
          children: [
            headerView(),
            Expanded(
              child: bodyContentList(),
            )
          ],
        ),
      ),
    );
  }

  Widget bodyContentList() {
    return ListView.builder(
        itemCount: _Model.payouttable!.length + 2,
        itemBuilder: (BuildContext context, int index) {
          int idx = index > 1 ? index - 2 : index;
          PayoutModel model = _Model.payouttable![idx];
          if (index == 0) {
            return ListHeaderText();
          }
          // else if (index == 10 - 1) {
          //   return ListFooterButton();
          // }
          else if (index == 1) {
            return contentListHeader();
          } else {
            return contentListCell(model);
          }
        });
  }

  Widget contentListCell(PayoutModel model) {
    // var payout = model.winners ? model.payout : 'No winner';
    var sortorder = model.sortorder;
    String payout = 'Prize $sortorder';
    if (model.payout != null) {
      payout = model.payout;
      if (payout.length == 2 && payout.contains('0')) {
        payout = 'No winner';
      }
    }
    // String payout = model.payout;
    // if (payout.length == 2 && payout.contains('0')) {
    //   payout = 'No winner';
    // }

    return Container(
      height: 45,
      color: Colors.white,
      child: Row(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: Text(
                model.sortorder,
                style: const TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    right: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: Text(
                model.matched,
                style: const TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    right: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: Text(
                model.probability,
                style: const TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    // right: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: Text(
                payout,
                style: const TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget contentListHeader() {
    return Container(
      height: 45,
      color: Colors.white,
      child: Row(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: const Text(
                'Divisions',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    right: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: const Text(
                'Match',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    right: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: const Text(
                'Odds',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    top: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    left: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    // right: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                    bottom: BorderSide(color: HexColor('#dddddd'), width: 0.5),
                  )),
              child: const Text(
                'Prize',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget ListHeaderText() {
    return Container(
      margin: EdgeInsets.only(left: 20),
      height: 50,
      alignment: Alignment.centerLeft,
      child: const Text(
        'Prize Breakdown',
        style: TextStyle(
          fontSize: 13,
          fontWeight: FontWeight.w600,
          color: Colors.black,
        ),
      ),
    );
  }

  Widget ListFooterButton() {
    return Container(
      alignment: Alignment.center,
      height: 50,
      child: TextButton(
          onPressed: () {
            debugPrint('More Details');
          },
          child: Text(
            'More Details',
            style: TextStyle(color: KaL_Config.KaL_themeColor_HL),
          )),
    );
  }

  Widget headerView() {
    // List<Widget> balls = [];
    // for (var element in _Model.regularnumbers ?? []) {
    //   balls.add(ball(element, false));
    // }
    // for (var element in _Model.extranumbers ?? []) {
    //   balls.add(ball(element, true));
    // }
    var _numbers = [];
    for (var element in _Model.regularnumbers!) {
      var ball = {'number': element, 'isRegular': true};
      _numbers.add(ball);
    }
    for (var element in _Model.extranumbers!) {
      var ball = {'number': element, 'isRegular': false};
      _numbers.add(ball);
    }
    for (var element in _Model.bonusnumbers!) {
      var ball = {'number': element, 'isRegular': false};
      _numbers.add(ball);
    }

    String drawTime = _Model.drawtime!;
    String jackpot = _Model.jackpot!;
    return Container(
      width: double.infinity,
      color: Colors.white,
      // height: 160,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 25, top: 10, bottom: 10),
            child: Text(
              drawTime,
              style: const TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 16,
                color: Colors.black,
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 25, right: 25, bottom: 10),
            // height: 60,
            // color: Colors.green,
            alignment: Alignment.center,
            // child: Row(
            //   mainAxisAlignment: MainAxisAlignment.center,
            //   children: balls,
            // ),
            // child: EJBallsView(numbers: _numbers),
            child: FLBallsView(balls: _numbers),
          ),
          Container(
            alignment: Alignment.center,
            margin: const EdgeInsets.only(top: 5, bottom: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Jackpot: ',
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                    color: Colors.black,
                  ),
                ),
                Text(
                  jackpot,
                  // '\$1,000 a day for life',
                  style: const TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
